
import React, { Component } from 'react';
import { NavBar, WhiteSpace, Toast } from 'antd-mobile';
import './hinfo.scss'
// 导入自己封装好的轮播图组件
import Swiper from '../../components/Swiper.js'
import { get_House_Info } from '../../utils/http_biz.js'
import { Link } from 'react-router-dom'

const BMap = window.BMap;

// 定义全局变量用来翻译房源配套
// 房屋配套数据源
const HOUSE_PACKAGE = [
    {
        id: 1,
        name: "衣柜",
        icon: "icon-wardrobe",
    },
    {
        id: 2,
        name: "洗衣机",
        icon: "icon-wash",
    },
    {
        id: 3,
        name: "空调",
        icon: "icon-air",
    },
    {
        id: 4,
        name: "天然气",
        icon: "icon-gas",
    },
    {
        id: 5,
        name: "冰箱",
        icon: "icon-ref",
    },
    {
        id: 6,
        name: "暖气",
        icon: "icon-Heat",
    },
    {
        id: 7,
        name: "电视",
        icon: "icon-vid",
    },
    {
        id: 8,
        name: "热水器",
        icon: "icon-heater",
    },
    {
        id: 9,
        name: "宽带",
        icon: "icon-broadband",
    },
    {
        id: 10,
        name: "沙发",
        icon: "icon-sofa",
    },
];

// 猜你喜欢数据源
const guessData = [
    {
        houseImg: "/newImg/7bjk7dcn4.jpg",
        title: "中海锦城 3室2厅 3400元",
        tags: ["近地铁"],
        price: 3400,
        desc: "三室/113/南/中海锦城",
        houseCode: "5cc44e1f1439630e5b3d353c",
    },
    {
        houseImg: "/newImg/7bjfdalho.jpg",
        title: "整租 · 出租 银河城春晓苑一期 中间楼层，阳光好。",
        tags: ["双卫生间"],
        price: 1300,
        desc: "三室/63/南|北/银河城春晓苑",
        houseCode: "5cc477061439630e5b467b0b",
    },
    {
        houseImg: "/newImg/7bjk6g1cn.jpg",
        title: "吉祥龙精装三房 有钥匙 看房方便",
        tags: ["近地铁", "随时看房"],
        price: 18000,
        desc: "三室/100/东南/汉森吉祥龙",
        houseCode: "5cc4a1db1439630e5b50220f",
    },
];

class HouseInfo extends Component {
    state = {
        isMark: true,
        info: {
            "houseImg": [
                "/newImg/7bjda81jh.jpg",
                "/newImg/7biic6li0.jpg",
                "/newImg/7bj41bnpp.jpg",
                "/newImg/7bi5fok43.jpg",
                "/newImg/7bj4hf9fe.jpg",
                "/newImg/7bkp38kn9.jpg",
                "/newImg/7bl1ili6o.jpg",
                "/newImg/7bkgh93eo.jpg"
            ],
            "title": "整租 · 御景新世界 诚心出租 视野好 采光好 户型好",
            "tags": [
                "精装",
                "集中供暖",
                "双卫生间"
            ],
            "price": 16500,
            "houseCode": "5cc4494549926d0e2b94c816",
            "description": "【房源亮点】 此房所在园区环境很安静适合居住，三室两厅比较适合一家三口或者老人居住，距离公园特近，园区安静 ，购物便利 【交通出行】 可乘公交路线 222 800 173 预备役号等 距离地铁2号线市图站1.5公里（来源百度地图） 【周边配套】 南临浑河南岸 沈水湾公园 距离200米{来源百度地图} 市图书馆1300米 {来源百度地图}三好街1500米{来源百度地图}东北大学1400米{来源百度地图} 【小区介绍】 新世界开发商，封闭园区24小时物业，物业管理严格，每楼都有大堂管家，照顾您的日常生活。",
            "roomType": "三室",
            "oriented": [
                "南",
                "北"
            ],
            "floor": "中楼层",
            "community": "御景新世界",
            "coord": {
                "latitude": "41.757876",
                "longitude": "123.428481"
            },
            "supporting": [
                "电视",
                "冰箱",
                "洗衣机",
                "空调",
                "热水器",
                "沙发",
                "暖气",
                "宽带",
                "衣柜",
                "天然气"
            ],
            "size": 65
        }
    }

    // 问题：当在一个页面中通过路由跳转到自己，如果只是参数发生改变，是不会引起生命周期方法
    // componentDidMount,render的执行的，所以数据更新不了
    // 解决：明确,路由参数一旦发生改变，其实会导致props对象中的属性也会发生改变，
    // 可以使用componentWillReceiveProps生命周期方法来进行数据重新请求处理
    // componentWillReceiveProps的参数可以获取到当前路由参数的最新值，如果在这个函数中使用
    // this.props.match.parmas是获取到之前的老的参数
    componentWillReceiveProps(props) {
        // console.log();
        let id = props.match.params.id; // 拿到目标参数最新的值
        // console.log(props.match.params.id);
        // console.log(this.props.match.params.id);

        // console.log(11111);
        this.getHouseData(id);
    }

    // 0.0 在页面加载完成的生命周期方法中请求服务器数据
    async componentDidMount() {
        let id = this.props.match.params.id;

        this.getHouseData(id);

        // 在页面加载完毕以后使用百度地图进行渲染
        await this.initMap();
    }

    // 根据房屋id获取服务器数据
    getHouseData = async (id) => {
        // 获取路由参数id的值（代表的是房屋信息id）

        let info = await get_House_Info({ id: id });
        this.setState({ info })
    }

    initMap = () => {
        // 在页面加载完毕以后使用百度地图进行渲染
        let { community, coord: { longitude, latitude } } = this.state.info;
        var map = new BMap.Map("map");
        var point = new BMap.Point(longitude, latitude);
        map.centerAndZoom(point, 14);

        // 向地图上添加标记物
        let opts = {
            position: point,
            offset: new BMap.Size(0, -40)
        }
        let label = new BMap.Label(`<div class="map_red_rect">
                                    <span>${community}</span>
                                    <span class="map_red_arrow"></span>
                                </div>`, opts);
        // 重置label对象的样式
        label.setStyle({
            border: 'none'
        })
        map.addOverlay(label)

    }

    // 1.0 生成导航浏栏jsx返回
    renderNav = () => {
        let { community } = this.state.info;
        return (
            <NavBar
                className="narbar"
                mode="light"
                icon={<i className="iconfont icon-back"></i>}
                onLeftClick={() => this.props.history.go(-1)}
                rightContent={[
                    <i className="iconfont icon-share"></i>
                ]}
            >{community}</NavBar>
        )
    }

    // 2.0 轮播图(走马灯)
    renderSwiper = () => {
        // 2.0.1 从state.info对象中结构出houseImg数组
        let { houseImg } = this.state.info;
        // 2.0.2 为了匹配Swiper的数据要求，包装一个数据对象
        let arr = [];
        houseImg.forEach((item, index) => {
            arr.push({
                id: item,
                imgSrc: item
            })
        })
        return (
            <Swiper data={arr}></Swiper>
        )
    }

    // 3.0 房屋基本信息
    renderHouseInfo = () => {
        // 1.0 从state.info对象中结构出此方法中需要的属性
        let { title, tags, price, roomType, size, floor } = this.state.info;

        return (<div className="info">
            <div className="info_header">
                <h3 className="info_header_name">{title}</h3>
                <div className="info_header_tags">
                    {
                        tags.length > 0 &&
                        tags.map(tag => (<span key={tag}>{tag}</span>))
                    }
                </div>
            </div>
            <div className="info_main">
                <div className="info_main_item">
                    <p>{price}</p>
                    <span>租金</span>
                </div>
                <div className="info_main_item">
                    <p>{roomType}</p>
                    <span>房型</span>
                </div>
                <div className="info_main_item">
                    <p>{size}平米</p>
                    <span>面积</span>
                </div>
            </div>
            <div className="info_bottom">
                <div className="info_bottom_item">
                    <span>楼层：</span>
                    <span>{floor}</span>
                </div>
            </div>
        </div>)
    }

    // 4.0 小区房屋地图位置
    renderMap = () => {
        // 4.0.1 结构出地图需要的两个数据  community,coord
        let { community, coord: { longitude, latitude } } = this.state.info;
        // 4.0.2 渲染百度地图 （必须放到页面生命周期函数didmount中）


        // 返回jsx
        return (<div className="d_map">
            <div className="title">小区：{community}</div>
            {/* 存放百度地图的内容 */}
            <div id="map" className="map_main"></div>
        </div>)
    }

    // 5.0 房源配套
    renderSupport = () => {
        let { supporting } = this.state.info;
        // 1.0 把supporting数组中的每一个文本当做条件去HOUSE_PACKAGE数组中查找相应的数据
        let resArr = HOUSE_PACKAGE.filter(item => supporting.indexOf(item.name) != -1);

        return (<div>
            <div className="title">房源配套</div>
            <div className="support">
                {
                    resArr.length > 0 &&
                    resArr.map(item => (
                        <div key={item.id} className="support_item">
                            <span className={`iconfont ${item.icon}`}></span>
                            <span>{item.name}</span>
                        </div>
                    ))
                }
            </div>
        </div>)
    }

    // 6.0 渲染描述
    renderDescription = () => {
        const { description } = this.state.info;
        return (
            <>
                <div className="title">房源概况</div>
                <div className="description">
                    <div className="description_title">
                        {/* 房东 */}
                        <img
                            className="owner_avatar"
                            src="https://api-haoke-web.itheima.net/img/avatar.png"
                            alt=""
                        />
                        <div className="owner_info">
                            <span className="owner_info_name">王女士</span>
                            <span className="owner_info_tag">
                                <i className="iconfont icon-auth"></i>已认证房主
              </span>
                        </div>
                        <span className="owner_send_msg">发消息</span>
                    </div>
                    <div className="description_body">
                        {description ? description : "暂无房屋描述"}
                    </div>
                </div>
            </>
        );
    };

    // 8.0渲染底部栏
    renderBottom = () => {
        const { isMark } = this.state;
        return (
            <div className="bottom">
                <div className="bottom_item">
                    {isMark ? (
                        <>
                            <img
                                className="bottom_icon_fav"
                                src="https://api-haoke-web.itheima.net/img/star.png"
                            />
                            <span>已收藏</span>
                        </>
                    ) : (
                            <>
                                <img
                                    className="bottom_icon_fav"
                                    src="https://api-haoke-web.itheima.net/img/unstar.png"
                                />
                                <span>收藏</span>
                            </>
                        )}
                </div>
                <div
                    onClick={() => Toast.info("功能升级中...", 2)}
                    className="bottom_item"
                >
                    在线咨询
        </div>
                <a href="tel://10086" className="bottom_item">
                    电话预约
        </a>
            </div>
        );
    };

    // 7.0 猜你喜欢
    renderGuess = () => {
        let list = guessData;
        return (<div>
            <div className="title">猜你喜欢</div>
            {
                list.map(item => (
                    <div key={item.houseCode} className="guess_list">
                        <Link className="house_item" to={"/info/" + item.houseCode}>
                            <img
                                class="house_item_img"
                                src={`https://api-haoke-web.itheima.net${item.houseImg}`}
                                alt={item.title}
                            />
                            <div className="house_item_info">
                                <h4 className="house_item_name">{item.title}</h4>
                                <p className="house_item_desc">{item.desc}}</p>
                                <p className="house_item_tags">
                                    {
                                        item.tags.length > 0 &&
                                        item.tags.map(tag => (
                                            <span key={tag}>{tag}</span>
                                        ))
                                    }
                                </p>
                                <p className="house_item_price">{item.price}</p>
                            </div>
                        </Link>
                    </div>
                ))
            }


        </div>)
    }

    render() {
        let { supporting } = this.state.info;
        return (<div className="detail">
            {/* 接受路由传入的id参数 */}
            {/* { this.props.match.params.id} */}

            {/* 1.0 NavBar */}
            {this.renderNav()}

            {/* 2.0 轮播图(走马灯) */}
            <div className="slider_out">{this.renderSwiper()}</div>

            {/* 3.0 房屋基本信息 */}
            {this.renderHouseInfo()}

            <WhiteSpace size="md" ></WhiteSpace>
            {/* 4.0 房屋地图位置 */}
            {this.renderMap()}

            <WhiteSpace size="md" />
            {/* 5.0 房源配套 */}
            {supporting.length > 0 && this.renderSupport()}

            {/* 6.0 房屋描述 */}
            {this.renderDescription()}

            {/* 7.0 猜你喜欢 */}
            {/* 7.0 猜你喜欢 */}
            <WhiteSpace size="md" />
            {this.renderGuess()}

            {/* 8.0 底部固定栏目 */}
            {this.renderBottom()}

        </div>);
    }
}

export default HouseInfo;